<template>
    <div class="app">
        <Header/>

        <div class="app-main">
            <div class="center">
                <h1>{{suggestionsDetail.title}}</h1>
                <div class="extend">
                    <p>【征集单位】<span>{{suggestionsDetail.deptName}}</span></p>
                    <p>【开始时间】<span>{{suggestionsDetail.startTime}}</span></p>
                    <p>【征集状态】
                        <span v-if="suggestionsDetail.isSurvey==1" class="end">结束征集</span>
                        <span v-else class="end">正在征集</span>
                    </p>
                    <p>【结束时间】<span>{{suggestionsDetail.endTime}}</span></p>
                </div>

                <div class="detail" v-html="suggestionsDetail.content">
                </div>

                <div class="fjxz">
                    <div style="font-size:16px;font-weight:bold" v-for="item in attachment" :key="item.id">
                        相关附件：
                        <span style="color:#18578e">{{item.fileName}}</span>
                        <a :href="'http://www.xinjiang.gov.cn/communication/api-common/file/download?path=' +item.path">下载</a>
                    </div>
                </div>

                <div v-if="suggestionsDetail.isSurvey===2">
                    <form class="hd_yjzj_input">
                        <div class="div_i_title">
                            &nbsp;&nbsp; 我要征集
                        </div>
                        <div class="form-group">
                            <label>建议人：</label>
                            <input type="text" id="nickName" v-model="form.nickName">
                            <span class="icon_zy">*</span>
                        </div>
                        <div class="form-group">
                            <label>联系电话：</label>
                            <input type="text" id="phone" v-model="form.phone">
                            <span class="icon_zy">*</span>
                        </div>
                        <div class="form-group">
                            <label>E-MAIL：</label>
                            <input type="text" id="email" v-model="form.email">
                            <span class="icon_zy">*</span>
                        </div>
                        <div class="form-group">
                            <label>建议内容：</label>
                            <textarea name="" id="content" cols="30" rows="10" v-model="form.content"></textarea>
                            <span class="icon_zy">*</span>
                        </div>
                        <div class="form-group hd_yzm">
                            <label>验证码：</label>
                            <input type="text" id="hd_yzm" v-model="form.code">
                            <!--                        <div class="yzm_warp">-->
                            <!--                            <img :src="validationUrl" @click="changeValidationUrl">-->
                            <!--                        </div>-->
                            <!--                        <a href="javascript:void(0);" @click="changeValidationUrl" class="switchvCode" tabindex="-1">看不清楚？换张图片</a>-->

                            <div class="yzm_warp">
                                <SIdentify :identifyCode="identifyCode"></SIdentify>
                            </div>
                            <a href="javascript:void(0);" @click="refreshCode" class="switchvCode"
                               tabindex="-1">看不清楚？换张图片</a>

                        </div>
                        <div class="form-group btn-tijiao">
                            <button type="button" class="submitBtn" @click="submitForm">提交</button>
                            <button type="reset" class="resetBtn">重写</button>
                        </div>
                    </form>
                </div>

            </div>
        </div>

        <div class="foot-wrap">
            <iframe
                id="data_detail"
                height='218'
                src="http://www.sc.gov.cn/10462/c106307/foot_newer_1200.shtml"
                width="100%" frameborder="0"
                @load="ch"
            ></iframe>
        </div>

    </div>
</template>

<script>
    import Header from "@/components/Header";
    import {getRequest, postRequest} from '@/api'
    import SIdentify from "@/components/utils/SIdentify.vue";

    export default {
        name: "SuggestionsDetail",
        components: {
            Header, SIdentify
        },
        data() {
            return {
                articleId: "",
                //验证码接口
                validationUrl: "http://www.xinjiang.gov.cn/communication/api-common/validation/getVerify",
                //征集详情数据
                suggestionsDetail: {},
                //相关附件
                attachment: [],
                //验证码
                identifyCode: "",
                identifyCodes: "0123456789abcdwerwshdjeJKDHRJHKOOPLMKQ",//随便打的
                //表单数据
                form: {
                    phone: "",
                    nickName: "",
                    email: "",
                    content: "",
                    code: "",
                }
            };
        },
        methods: {
            //切换验证码[接口方式]
            changeValidationUrl() {
                this.validationUrl = "http://www.xinjiang.gov.cn/communication/api-common/validation/getVerify?" + Math.random();
            },
            //切换验证码[前端方式]
            refreshCode() {//
                this.identifyCode = "";

                this.makeCode(this.identifyCodes, 4);

            },
            randomNum(min, max) {
                max = max + 1
                return Math.floor(Math.random() * (max - min) + min)
            },
            // 随机生成验证码字符串
            makeCode(data, len) {
                for (let i = 0; i < len; i++) {
                    this.identifyCode += data[this.randomNum(0, data.length - 1)]
                }
            },

            //获取征集详情数据
            getDetail() {
                let url = '/sys/sysMember/getDetailsPage';
                let params = {
                    id: this.articleId
                };
                getRequest(url, params).then(res => {
                    if (res.data.status == 'success') {
                        this.suggestionsDetail = res.data.data;
                    }
                })
            },

            //获取相关附件
            getAttachment() {
                let url = '/sys/sysMember/getfileLoad';
                let params = {
                    id: this.articleId
                };
                getRequest(url, params).then(res => {
                    if (res.data.status == 'success') {
                        this.attachment = res.data.data;
                    }
                })
            },

            //提交表单
            submitForm() {
                //校验验证码、请求参数
                if (this.checkParams() && this.checkIdentifyCodes()) {
                    let url = '/sys/sysMember/frontComments';

                    let formData = new FormData();
                    formData.append('articleId', this.articleId);
                    formData.append('phone', this.form.phone);
                    formData.append('nickName', this.form.nickName);
                    formData.append('email', this.form.email);
                    formData.append('content', this.form.content);

                    postRequest(url, formData).then(res => {
                        if (res.data.status == 'success') {
                            this.$message.success('提交成功');
                            this.form = {
                                phone: "",
                                nickName: "",
                                email: "",
                                content: "",
                                code: "",
                            }
                        } else {
                            if (res.data.data.errorMsg) {
                                this.$message.error(res.data.data.errorMsg);
                            } else {
                                this.$message.error('提交失败');
                            }
                        }
                    })


                }

            },

            //校验验证码
            checkIdentifyCodes() {
                let userIdentifyCode = this.form.code;
                if (!userIdentifyCode) {
                    this.$message.error('验证码不能为空');
                    return false;
                }
                if (userIdentifyCode.toLowerCase() !== this.identifyCode.toLowerCase()) {
                    this.$message.error('验证码输入有误');
                    return false;
                }
                return true;
            },
            //校验请求参数
            checkParams() {
                if (!this.form.phone) {
                    this.$message.error('联系电话不能为空');
                    return false;
                }
                if (!this.form.content) {
                    this.$message.error('建议内容不能为空');
                    return false;
                }
                if (!this.form.nickName) {
                    this.$message.error('建议人不能为空');
                    return false;
                }
                if (!this.form.email) {
                    this.$message.error('E-MAIL不能为空');
                    return false;
                }
                return true;
            }
        },
        //初始化时执行
        mounted() {
            //从url中获取id
            this.articleId = this.$route.query.id;

            this.getDetail();

            this.getAttachment();

            this.refreshCode();

        },
    }
</script>

<style scoped>
    .app-main {
        overflow: hidden;
    }

    .app-main .center {
        width: 1200px;
        margin: 20px auto;
        background-color: white;
        padding: 0 20px 25px;
    }

    .center h1 {
        font-size: 24px;
        color: #333333;
        padding-top: 30px;
        line-height: 36px;
        text-align: center;
        margin-top: 20px;
    }

    .extend {
        padding-top: 20px;
        font-size: 12px;
        color: #666666;
        line-height: 18px;
        text-align: center;
        border-bottom: 1px dotted #cdcdcd;
        padding-bottom: 20px;
    }

    .extend p {
        display: inline-block;
    }

    .extend p span {
        color: #999999;
        margin-right: 15px;
    }

    .extend p span.end {
        color: red;
    }

    .hd_yjzj_input {
        margin-top: 30px;
    }

    .div_i_title {
        height: 35px;
        line-height: 35px;
        background: #2A3C54;
        color: #fff;
        padding: 0 20px;
    }

    .hd_yjzj_input .form-group {
        overflow: hidden;
        margin: 25px 0;
        padding: 0px 20px;
    }

    .icon_zy {
        color: #d80909;
        margin-left: 8px;
        float: left;
    }

    .hd_yjzj_input .form-group label {
        width: 90px;
    }

    .hd_yjzj_input .form-group label, .hd_yjzj_input .form-group input {
        float: left;
        height: 40px;
        line-height: 40px;
    }

    .hd_yjzj_input .form-group textarea {
        width: 800px;
        height: 150px;
        outline: none;
        padding: 10px;
        float: left;
        border: 1px solid #eee;
    }

    .hd_yjzj_input .form-group input {
        outline: none;
        width: 550px;
        padding: 0 10px;
        float: left;
        border: 1px solid #eee;
    }

    .hd_yjzj_input .form-group input {
        float: left;
        height: 40px;
        line-height: 40px;
    }

    .hd_yzm a {
        line-height: 35px;
        margin-left: 60px;
    }

    a:hover, a:focus {
        color: red;
    }

    .hd_yjzj_input .btn-tijiao button {
        border: 1px solid #dddddd;
        padding: 0;
        width: 150px;
        height: 45px;
        background: #2A3C54;
        background-color: rgb(42, 60, 84);
        text-align: center;
        color: #fff;
        display: inline-block;
        border-radius: 4px;
        letter-spacing: .3em;
        font-size: 18px;
        background-color: rgb(85, 85, 85);
    }

    .hd_yjzj_input .btn-tijiao .resetBtn {
        background: #aeaeae;
        margin-left: 3%;
    }

    .yzm_warp {
        width: 70px;
        height: 30px;
        float: left;
        /*margin-left: 25px;*/
    }

    .hd_yjzj_input .hd_yzm img {
        width: 100%;
        height: 100%;
        margin-left: 25px;
    }
</style>
